<template>
<div>
  <v-header :indexHeader="indexHeader">
    <span slot="imgsrc" class="Classify-Header" @click="$router.go(-1);"></span>
  </v-header>
  <div class="content">
      <div class="content-left">
        <ul >
          <li v-for="(item,index) in Classify" :key="index"  :class="activelistname==item.msg?'cur':''" @click="changelist(item.msg,index)">{{item.name}}</li>
        </ul>
      </div>
      <div class="content-right">
            <component :is="msg"></component>
      </div>
  </div>
</div>
</template>

<script>
import header from '../components/index/Header.vue'

/*分类页面*/
import Hot from "../components/Classify/Hot.vue";
import Mobile from "../components/Classify/Mobile.vue";


export default {
  name: "Classify",
  data:()=>({
     indexHeader:'挂烫机',
      Classify:[],
    activelistname:'Hot',
    msg:'Hot'
  }),

  components:{
    'v-header':header,
    'Hot':Hot,
    'Mobile':Mobile
  },


  mounted() {
    // var that=this;
    // let t='挂烫机';
    // that.$store.commit('increment',t)
    // that.$emit("header",t)
    //
    // console.log( that.$emit("header",t))


      let that=this;
      let url='http://localhost:5000';
      this.$http.get(url+'/data/Classify.json')
          .then(function (response) {
            that.Classify=response.data.Classify.map(i=>({

              name: i['name'],
              msg:i['msg'],

            }));

          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });

  },
  methods:{
    // get(a){
    //   this.indexHeader=a;
    //   this.indexHeader='挂烫机';
    //   console.log(this.indexHeader)
    // }
    //点击位移
    changelist(it,num){
      this.msg=it;
      this.msg=it;
      this.activelistname=it
      var scrooll=document.getElementsByClassName('content-left')[0]
      scrooll.scrollTop=scrooll.scrollTop+((num*46)-scrooll.scrollTop)
      var scrooll2=document.getElementsByClassName('content-right')[0]
      scrooll2.scrollTop=0

    }

  }
}
</script>

<style scoped>
.Header{
  background: #FFFFFF;
}
.Classify-Header{
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background: url('') no-repeat;
  background-size: 100% 100%;
}
.nut-searchbar *{
  background:#F7F7F7 !important;
}
.content{
  width: 100vw;
 height: 100vh;
  background:#FFFFFF;
  padding-top: 2.5rem;
  padding-bottom: 3.125rem;
  display: flex;
}
.content-left{
  width: 25vw;
  height: 86vh;
  overflow-y: scroll;
  background: rgba(255,255,255,0);
  font-size:0.875rem;
}
.content-left li{
  width: 100%;
  height: 2.875rem;
  background:#F8F8F8 ;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-right{
  width: 75vw;
  height: 86vh;
  overflow-y: scroll;

}
::-webkit-scrollbar{
   display: none;
 }
.cur{
  background: #fff !important;
  color:#e93b3d ;
}
.Header{
  border-bottom:1px solid #E5E5E5;
}
</style>